<!--
 * @Author: C.
 * @Date: 2023-03-08 15:18:06
-->
<script lang="tsx">
  import { defineComponent } from 'vue';
  import { Descriptions, DescriptionsItem, TabPane, Tabs, Card } from 'ant-design-vue';
  import { CopyOutlined } from '@ant-design/icons-vue';

  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { tableFields } from '/~/maps/fields/tableMaps';
  import { useAppForm } from '/~/hooks/help/useAppForm';
  import { BasicForm } from '/@/components/Form';
  import { formFields } from '/~/maps/fields/formMaps';
  import { descFields } from '/~/maps/fields/descMaps';
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
    name: 'FieldView',
    setup() {
      const [register] = useAppForm({
        schemas: formFields,
      });
      const { createMessage } = useMessage();
      const { clipboardRef } = useCopyToClipboard();
      function handleClick(field, title) {
        clipboardRef.value = `"${field}"`;
        createMessage.success(`[${title}]复制成功`);
      }
      function renderDescItem(field, title) {
        let style = {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        };
        return (
          <DescriptionsItem label={field}>
            <div style={style}>
              <span>{title}</span>
              <CopyOutlined
                style={{ color: '#0960bd', fontSize: '20px' }}
                onClick={() => handleClick(field, title)}
              />
            </div>
          </DescriptionsItem>
        );
      }
      return () => (
        <PageWrapper title="预设字段">
          <div class="field-view">
            <Tabs>
              <TabPane tab="表格预设" key="table">
                <Descriptions bordered size="small">
                  {tableFields.map((item) => {
                    return renderDescItem(item.dataIndex, item.title);
                  })}
                </Descriptions>
              </TabPane>
              <TabPane tab="表单预设" key="form">
                <Descriptions bordered size="small">
                  {formFields.map((item) => {
                    return renderDescItem(item.field, item.label);
                  })}
                </Descriptions>
                <Card title="表单">
                  <BasicForm onRegister={register} />
                </Card>
              </TabPane>
              <TabPane tab="描述预设" key="desc">
                <Descriptions bordered size="small">
                  {descFields.map((item) => {
                    return renderDescItem(item.field, item.label);
                  })}
                </Descriptions>
              </TabPane>
            </Tabs>
          </div>
        </PageWrapper>
      );
    },
  });
</script>
<style lang="less" scoped>
  .field-view {
    background-color: @component-background;
    padding: 10px 20px 100px 20px;
  }
</style>
